<template>
  <c-main-template
    minHeight="auto"
    :isBreadcrumb="false"
    class="mr-24 ml-24 mt-24"
  >
    <el-row :gutter="24" class="pd-lg">
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">出口申请单号：</div>
          <el-input
            size="large"
            placeholder="请输入出口申请单号"
            v-model="querys.id"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>

      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">状态：</div>
          <el-select
            v-model="querys.statusList"
            size="large"
            multiple
            class="wh flex-1 mr-lg"
            placeholder="请选择状态"
          >
            <el-option
              v-for="item in exportType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="flex-x-end">
          <el-button size="large" @click="handleReset">重 置</el-button>
          <el-button size="large" type="primary" @click="handleSelect"
            >查 询</el-button
          >
        </div>
      </el-col>
    </el-row>
  </c-main-template>
  <c-main-template
    v-loading="loading"
    class="mg-24"
    minHeight="auto"
    title="出口申请"
    :isBreadcrumb="false"
  >
    <template #operate>
      <el-button size="large" type="primary" @click="handleAddExport"
        >新增出口申请</el-button
      >
    </template>
    <c-table-template :data="tableData">
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column
        label="出口申请单号"
        prop="id"
        align="center"
        min-width="220"
      />
      <el-table-column
        label="出口国家"
        prop="startHarborCountry"
        align="center"
        width="220"
      />
      <el-table-column
        label="目的港"
        prop="endHarborCountry"
        align="center"
        min-width="200"
      />
      <el-table-column label="状态" align="center" width="200">
        <template #default="scope">
          {{ getStatusName(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="timeCreate"
        label="创建时间"
        align="left"
        width="200"
      >
        <template #default="scope">
          {{ filters.dateYMDHMSFormat(scope.row.timeCreate) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template #default="scope">
          <el-button
            v-if="scope.row.status === 0"
            link
            class="mr-sm"
            type="primary"
            size="small"
            @click="handleUpload(scope.row)"
          >
            <span>重新提交</span>
          </el-button>
          <!--  v-if="scope.row.isPayCustoms || scope.row.isPayOut" -->
          <el-button
           v-if="scope.row.isPayCustoms || scope.row.isPayOut"
            link
            class="mr-sm"
            type="primary"
            size="small"
            @click="handlePayment(scope.row)"
          >
            <span>支付费用</span>
          </el-button>
          <!-- isDepositUploaded false 未上传  true 已上传- -->
          <el-button
            v-if="scope.row.status === 2 && !scope.row.isDepositUploaded"
            link
            class="mr-sm"
            type="primary"
            size="small"
            @click="handleVoucher(scope.row)"
          >
            <span>上传保证金凭证</span>
          </el-button>
          <el-button
            link
            class="mr-sm"
            type="primary"
            size="small"
            @click="handleDetails(scope.row)"
          >
            <span>详情</span>
          </el-button>
        </template>
      </el-table-column>
    </c-table-template>
    <div class="flex-x-end pd-20">
      <c-page-template
        :total="total"
        :querys="querys"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </c-main-template>
  <c-export-form ref="cExportFormRef" @change="tableList" />
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, computed } from "vue";
import { exportType } from "@/utils/status.js";
import { useBasicsTable } from "@/hooks/useTable.js";
import { useRouter } from "vue-router";
import cExportForm from "./components/ExportForm.vue";
const { proxy } = getCurrentInstance();
const getStatusName = computed(() => {
  return (item) => {
    const value = exportType.find((x) => x.value === item.status);
    return value.label || "未找到";
  };
});
const router = useRouter();
const cExportFormRef = ref();
const handleAddExport = () => {
  cExportFormRef.value.handleOpen();
};
const handleUpload = (item) => {
  cExportFormRef.value.handleOpen(item);
};
const handlePayment = (item) => {
  router.push({
    path: "/Bill",
    query:{
      key:'0',
      id:item.id,
      status:'0'
    }
  });
};
const handleVoucher = (item) => {
  router.push({
    path: "/Loan",
    query: {
      key: 2,
      id: item.id,
    },
  });
};
const handleDetails = (item) => {
  router.push({
    path: "/Export/Details",
    query: {
      id: item.id,
    },
  });
};
const {
  querys,
  tableData,
  total,
  loading,
  tableList,
  handleSelect,
  handleSizeChange,
  handleCurrentChange,
  handleReset,
} = useBasicsTable({
  url: "/sellerCarOutApply/sellerPage",
  getParams: () => {
    const params = {};
    if (querys.value.statusList && querys.value.statusList.length > 0) {
      params.statusList = querys.value.statusList.join(",");
    }
    return params;
  },
});
</script>